<template>
  <div style="
  position: absolute;
                left:0;
                top:0;
                right:0;
                bottom:0;
                margin:auto;
                height:100%;
                width:370px;
">
    <div>
      <div style="width: 100%;height: 120px;margin-top: 5px;margin-bottom: 10px">
        <div style="width: 35%;height: 100%;float: left">
          <img src="./static/images/力合新图表.jpg" style="width: 100px;height: 100px;margin-top: 15px;
            float: left;border-radius: 50%;
            margin-left: 15px;box-shadow: 0 0 10px burlywood; /* 发光效果 */">
        </div>
        <div style="width: 65%;height: 100%;float: right">
          <span style="font-weight: bold;margin-left: 15px;font-size: 22px;float: left;border-radius: 50%;margin-top: 40px">2024年长护(上海)居家照护培训 </span>
        </div>
      </div>
      <hr>
    </div>
    <div  style="width: 300px;height: 300px;position: relative;top:30px;left: 40px">
      <h1 style="">报名二维码</h1>
      <img :src="qrcodeData" alt="二维码"/>
    </div>
    <div style="width: 300px;height: 100px; position: relative;left: 60px;text-align: left;float: left;font-size: 14px;color: burlywood;">
      提示：请扫描二维码填写报名信息进行报名。
    </div>
  </div>
</template>
<script>
import QRCode from "qrcode";
import {Base64} from "js-base64";

export default {
  data() {
    return {
      qrcode: "",
      qrcodeData: "",
      name: '',
      id: '',
      type: '',
    };
  },
  methods: {
    generateQRCode(qrcode) {
      if (this.qrcode) {
        QRCode.toDataURL(this.qrcode)
            .then(dataUrl => {
              this.qrcodeData = dataUrl;
            })
            .catch(error => {
              console.error("生成二维码时出错:", error);
            });
      }
    }
  },
  created() {
    this.qrcode = "http://gjjava.lihexinzhiye.com/CDuan/redirect_mine";
    //生成二维码
    this.generateQRCode(this.qrcode);
  }
};
</script>
<style scoped>
.centered-div {
  /*position: fixed; !* 绝对定位 *!*/
  /*top: 40%; !* 距离顶部50% *!*/
  /*left: 50%; !* 距离左侧50% *!*/
  /*transform: translate(-50%, -50%); !* 使用transform属性进行偏移，以确保元素正好在中心 *!*/
  /* 你可以添加更多的样式，如宽度、高度、背景色等 */
  width: 250px;
  height: 250px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 20px;
  box-sizing: border-box; /* 包括边框和内边距在内的宽度和高度 */



}
</style>
